<template>
    <div class="coupon-check">
      <!--S审核开关-->
      <div class="check-switch">
        <span>是否开启卡券审核功能</span> <i-switch v-model="coupon_check" @on-change="couponCheckChange" />
      </div>
      <!--E审核开关-->

      <!--S列表-->
      <template v-if="data.length > 0">
        <coupon v-for="item in data" :key="item.id"
                :data="item"
                @change-status="changeStatus"
          >
        </coupon>
        <!--S分页-->
        <Page class="page" :total="total" :page-size="page_size" @on-change="changePage" />
        <!--E分页-->
      </template>
      <template v-else><h5 class="empty">暂无审核卡券</h5></template>
      <!--E列表-->

      <!--S删除审核素材，弹窗写入审核失败原因-->
      <Modal
        v-model="remark_modal.show"
        title="请输入审核失败原因"
        :footer-hide="true"
        width="400"
      >
        <Input placeholder="请输入审核失败原因" v-model="remark_modal.remark"></Input>
        <div style="overflow: hidden;margin-top: 10px;">
          <Button type="primary" style="float: right;" @click="remark_submit">确认</Button>
        </div>
      </Modal>
      <!--E删除审核素材，弹窗写入审核失败原因-->
    </div>
</template>

<script>
import Coupon from '../components/coupon/Coupon'
export default {
  name: 'coupon-check',
  data () {
    return {
      // 卡券审核状态
      coupon_check: false,
      // 卡券列表
      data: [],
      // 卡券总数
      total: 0,
      // 每页卡券数量
      page_size: 21,
      // 当前页面
      page: 1,
      // 素材审核失败原因
      remark_modal: {
        remark: '',
        show: false,
        // 操作的卡券id
        coupon_id: 0,
        // 修改的卡券状态
        status: 0
      }
    }
  },
  components: {
    Coupon
  },
  mounted () {
    this.findCouponCheck()
    this.getList()
    this.getTotal()
  },
  methods: {
    /**
     * 卡券审核状态
     */
    findCouponCheck () {
      this.$get('setting/find')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            let { coupon_check } = data
            this.coupon_check = coupon_check === '1'
          }
        })
    },
    /**
     * 卡券审核状态改变提交
     * @param value
     */
    couponCheckChange (value) {
      let data = { coupon_check: value ? 1 : 0 }
      this.$post('setting/set', {
        data
      })
        .then((res) => {
          if (res.data.code !== 0) {
            this.$Message.error('设置失败')
          }
        })
    },
    /**
     * 获取卡券列表
     */
    getList () {
      this.$get('coupon/getCheckList', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.data = data
          } else {
            this.data = []
          }
        })
    },
    /**
     * 获取数据总数
     */
    getTotal () {
      this.$get('coupon/getCheckTotal')
        .then((res) => {
          if (res.data.code === 0) {
            this.total = parseInt(res.data.data)
          }
        })
    },
    /**
     * 点击切换页面
     * @param page
     */
    changePage (page) {
      this.page = page
      this.getList()
    },
    /**
     * 修改卡券状态
     */
    changeStatus (res) {
      let { coupon_id, status } = res
      this.remark_modal.remark = ''
      if (status === 1) {
        this.$Modal.confirm({
          title: '提示',
          content: '确认后用户将无限制发放卡券，确认通过审核吗？',
          onOk: () => {
            this.sendChangeStatus(coupon_id, status)
          }
        })
      } else {
        this.remark_modal.show = true
        this.remark_modal.status = status
        this.remark_modal.coupon_id = coupon_id
      }
    },
    /**
     * 确认删除素材原因
     */
    remark_submit () {
      let remark = this.remark_modal.remark.trim()
      if (remark.length <= 0) {
        this.$Message.error('素材删除原因不能为空')
        return false
      } else if (remark.length > 20) {
        this.$Message.error('素材删除原因字数不能大于20')
        return false
      }
      this.remark_modal.show = false
      this.sendChangeStatus(
        this.remark_modal.coupon_id,
        this.remark_modal.status
      )
    },
    /**
     * 发送修改卡券请求
     */
    sendChangeStatus (coupon_id, status) {
      this.$post('coupon/changeStatus', {
        coupon_id,
        status,
        source: 'manage_check',
        remark: this.remark_modal.remark
      })
        .then((res) => {
          let { code } = res.data
          if (code === 0) {
            this.getList()
            this.getTotal()
          } else {
            this.$Message.error({ content: '操作失败' })
          }
        })
    }
  }
}
</script>

<style scoped lang="less">
  .check-switch{
    padding: 0 5px;
    line-height: 50px;
    height: 50px;
    background: #fff;
    margin-bottom: 10px;
    span{
      margin-right: 10px;
    }
  }
  .page{
    clear: both;
  }
  .empty{
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
</style>
